<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .line{
        width: 300px;
        height: 300px;
        /* 
            渐变的几个特殊角度
            to top: 0deg
            to right: 90deg
            to left: 270deg
            to bottom: 180deg
            三要素： 方向开始结束
         */
        background: linear-gradient(90deg,red 0%,blue 70%,blue 100%);
    }
        /* 
            径向渐变

         */
    .redial{
        width: 400px;
        height: 300px;
        /* 
            radial-gradient()
            属性：
            shape: 
                circle 只能产生正方形的渐变色
                ellipse: 适配当前的形状，如果是正方形的话，两者效果一样
            position : 圆心的坐标 默认为div的中心
                left,center,right,bottom
            size: 
                closest-side ： 最近的边，从坐标 50px 50px 开始算
                farthest-side： 最远的边
                closest-corner： 最近的角
                farthest-corner: 最远的角
         */
         /* border-radius: 150px; */
        background: radial-gradient(circle farthest-corner at 50px 50px,red,blue)
    }

    .repeat{
        /* 
            重复渐变
            
         */
        width: 400px;
        height: 400px;
        border-radius: 200px;
        background: repeating-radial-gradient(closest-side circle at center center,
        #fff 0%,#ff0000 10%,
        #fff 10%,#ff0000 20%
        );
    }
</style>
<body>
    <div class="line">

    </div>
    <div class="redial">

    </div>
    <div class="repeat">

    </div>
</body>
</html>